<%--
  Created by IntelliJ IDEA.
  User: HJC
  Date: 2019/11/15
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>question</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/backgroundfloor.css">
</head>
<body>
<style>
    .pctW{
        table-layout: fixed;
        text-overflow: ellipsis;
        white-space: pre-wrap;
        overflow: hidden;
        display: none;
    }
    .pctW td{
        word-wrap:break-word;
    }
    .bianh{
        width: 80px;
    }
    .shul{
        width: 80px;
    }
    .chuot{
        width: 400px;
    }
    .kais{
        width: 180px;
    }
    .jies{
        width: 180px;
    }
    .dat{
        width: 200px;
    }
    .yongh{
        width: 100px;
    }
    .def{
        width: 80px;
    }
    #searchinput{
        display: inline-block;
        width: 200px;
        height: 30px;
        border-radius: 5px;
    }
    .searchsub{
        display: inline-block;
        height: 30px;
        border-radius: 5px;
        text-align: center;
    }
</style>
<div class="searchId">
    <input type="text" id="searchinput" placeholder="输入你的学号..">&emsp;<button type="button" id="chazhao" class="searchsub">查找</button>
    <button type="button" id="jixudati" class="searchsub">继续答题</button>
</div>
<table id="mytable" cellspacing="1" width="900px" class=" pctW">
    <caption><strong>答题记录</strong></caption>
    <tr>
        <th scope="col" abbr="Configurations" class="nobg bianh">题单编号</th>
        <th scope="col" abbr="Dual 1.8" class="shul">答题数量</th>
        <th scope="col" abbr="Dual 2" class="chuot">错题编号</th>
        <th scope="col" abbr="Dual 2.5" class="kais">开始时间</th>
        <th scope="col" abbr="Dual 2.5" class="jies">结束时间</th>
        <th scope="col" abbr="Dual 2.5" class="dat">答题科目</th>
        <th scope="col" abbr="Dual 2.5" class="yongh">用户id</th>
        <th scope="col" abbr="Dual 2.5" class="def">得分</th>
    </tr>
    <%--<tr>
        <th scope="row" abbr="Model" class="spec">Model</th>
        <td>M9454LL/A</td>
        <td>M9455LL/A</td>
        <td>M9457LL/A</td>
    </tr>
    <tr>
        <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
        <td class="alt">Dual 1.8GHz PowerPC G5</td>
        <td class="alt">Dual 2GHz PowerPC G5</td>
        <td class="alt">Dual 2.5GHz PowerPC G5</td>
    </tr>
    <tr>
        <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
        <td>900MHz per processor</td>
        <td>1GHz per processor</td>
        <td>1.25GHz per processor</td>
    </tr>
    <tr>
        <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
        <td class="alt">512K per processor</td>
        <td class="alt">512K per processor</td>
        <td class="alt">512K per processor</td>
    </tr>--%>
</table>
</body>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        var n = 0;
        $(document).on('click', '#chazhao' , function(){
            if (n != 0){
                window.location.reload();
            }
            $('.pctW').css('display','table');
            var searchs = $('#searchinput').val();
            if (searchs.length == 10 || searchs.length == 3 ){
                n++;
                $.post("${pageContext.request.contextPath}/statistics/queryStatisById",{
                    uid:searchs
                },function(data){
                    console.log(data);
                    $(data).each(function(i,n){
                        if ( ++i % 2 == 0){
                            $('table').append('<tr></tr>');
                            $('table tbody').append('<th scope="row" abbr="Model" class="spec">'+n.allAnswer+'</th>');
                            $('table tbody').append('<td>'+n.answerNumber+'</td>');
                            $('table tbody').append('<td >'+((n.correctAnswer+" ").length > 50? n.correctAnswer : n.correctAnswer)+'</td>');
                            $('table tbody').append('<td>'+n.startTime+'</td>');
                            $('table tbody').append('<td>'+n.endTime+'</td>');
                            $('table tbody').append('<td>'+n.subject+'</td>');
                            $('table tbody').append('<td>'+n.uid+'</td>');
                            $('table tbody').append('<td>'+n.fraction+'</td>');
                        } else{
                            $('table').append('<tr></tr>');
                            $('table tbody').append('<th scope="row" abbr="G5 Processor" class="specalt">'+n.allAnswer+'</th>');
                            $('table tbody').append('<td class="alt">'+n.answerNumber+'</td>');
                            $('table tbody').append('<td class="alt">'+((n.correctAnswer+" ").length > 80? n.correctAnswer.substring(0,50) : n.correctAnswer)+'</td>');
                            $('table tbody').append('<td class="alt">'+n.startTime+'</td>');
                            $('table tbody').append('<td class="alt">'+n.endTime+'</td>');
                            $('table tbody').append('<td class="alt">'+n.subject+'</td>');
                            $('table tbody').append('<td class="alt">'+n.uid+'</td>');
                            $('table tbody').append('<td class="alt">'+n.fraction+'</td>');
                        }
                    });
                });
            }else{
                alert("请输入正确的学号");
            }
        });
        $(document).on('click','#jixudati',function(){
            window.location.href = "../question/refortq";
        });
    });
</script>
</html>
